<template>
  <div class="padding flex direction-column height-100">
    <div class="search-form margin-top padding-horizontal">
      <el-form inline>
        <el-form-item label="所属地区">
          <area-picker ref="areaPicker" v-model="districtBelong"></area-picker>
        </el-form-item>
        <el-form-item label="所属行业">
          <industry-picker v-model="belongIndustry"></industry-picker>
        </el-form-item>
        <el-form-item label="年能耗等级">
          <dictionary-picker v-model="energyConsumptionLevel" dic-code="NENG_HAO_SHUI_PING"></dictionary-picker>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="search">搜索</el-button>
          <el-button icon="el-icon-plus" type="primary" @click="add">新增</el-button>
          <el-button icon="el-icon-download" type="primary" @click="exportData('企业数据表.xlsx')">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="flex-1 overflow-auto dark-table-wrapper">
      <el-table
        v-loading="loading" :data="lists" ref="table"
        :header-cell-style="{
          backgroundColor: themeColor,
          color: 'white'
        }"
        height="100%"
      >
        <div slot="empty" class="empty-lists">
          <i class="i-custom:search"></i>
          <span class="empty-text">暂无数据</span>
        </div>
        <el-table-column v-for="column in columns" :key="column.prop" v-bind="column">
          <template v-if="column.prop === 'enterpriseName'" #default="{ row }">
            <el-link :underline="false" type="primary" @click="navigateToEnterpriseAnalysis(row, 'enterpriseCode')">
              {{ row.enterpriseName }}
            </el-link>
          </template>
          <!--          <template v-else-if="column.prop === 'address'" #default="{ row }">-->
          <!--            <el-link type="warning" :underline="false" @click="driving(row)">{{row.address}}</el-link>-->
          <!--          </template>-->
        </el-table-column>
        <el-table-column align="center" label="操作" prop="id" width="160">
          <template #default="{ row }">
            <td-button title="编辑" @click="edit(row)">
              <i class="i-custom:editor"></i>
            </td-button>
            <td-button
              class="del-btn"
              icon-style="color: var(--danger-color);border-color: var(--danger-color);"
              title="删除"
              @click="del(row)"
            >
              <i class="i-custom:ashbin"></i>
            </td-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <operate-modal ref="modal" :modal-data="modalData" :modal-title="modalTitle"
                   @save-success="reload"></operate-modal>
    <driving-search v-if="false" ref="driving" :to="drivingTo"></driving-search>
  </div>
</template>

<script>
import AreaPicker from '@/components/area-picker'
import OperateModal from '@/views/system-settings/enterprise-management/operate-modal'
import TdButton from '@/components/td-button'
import DictionaryPicker from '@/components/dictionary-picker'
import DrivingSearch from '@/components/driving-search'
import IndustryPicker from '@/components/industry-picker'
import { confirmDel } from '@/utils'
import { del, loadUnderEnterprise as getListEnterprise } from '@/api/enterprose'
import Navigate2enterpriseAnalysis from '@/mixins/navigate2enterpriseAnalysis'
import ExportTableData from '@/mixins/export-table-data'

const api = {
  getListEnterprise,
  del,
}

export default {
  name: 'enterprise-management',
  mixins: [Navigate2enterpriseAnalysis, ExportTableData],
  components: {
    DrivingSearch,
    AreaPicker,
    OperateModal,
    IndustryPicker,
    DictionaryPicker,
    TdButton
  },
  data () {
    return {
      districtBelong: '',
      belongIndustry: '',
      energyConsumptionLevel: this.$route.query.energyConsumptionLevel,
      drivingTo: '',
      lists: [],
      loading: false,
      modalTitle: '',
      modalData: {},
      columns: [
        {
          label: '单位名称',
          prop: 'enterpriseName',
          width: 300
        },
        // { label: '社会信用代码', prop: 'socialCreditCode', },
        // { label: '是否央企', prop: 'centralEnterprises', },
        // { label: '法人代码', prop: 'corporateCode', },
        {
          label: '所属地区',
          prop: 'districtBelongName',
        },
        {
          label: '单位联系电话',
          prop: 'unitContactNumber',
        },
        {
          label: '所属行业',
          prop: 'belongIndustryName',
        },
        // { label: '所属领域', prop: 'belongField', },
        // { label: '是否能源加工转企业', prop: 'transferEnterprise', },
        {
          label: '年能耗等级',
          prop: 'energyConsumptionLevelName',
        },
        // {
        //   label: '经纬度',
        //   prop: 'lnglat',
        // },
        { label: '经度', prop: 'longitude', },
        { label: '纬度', prop: 'latitude', },
        // { label: '单位类型', prop: 'unitTypeName', },
        // { label: '法人代表', prop: 'legalRepresentative', },
        {
          label: '单位地址',
          prop: 'address',
        },
        // { label: '邮政编码', prop: 'zipCode', },
        // { label: '企业网址', prop: 'enterpriseUrl', },
        // { label: '电子邮箱', prop: 'email', },
        // { label: '传真', prop: 'fax', },
        // { label: '注册日期', prop: 'registrationDate', },
        // { label: '注册资本', prop: 'registeredCapital', },
        // { label: '备注', prop: 'remark', },
        // { label: '所属集团', prop: 'affiliatedGroup', },
        // { label: '集团地址', prop: 'groupAddress', },
        // { label: '集团类型', prop: 'groupType', },
        // { label: '能源管理机构', prop: 'managementAgency', },
        // { label: '主管节能领导', prop: 'supervisor', },
        // { label: '主管节能领导电话', prop: 'supervisorPhone', },
        // { label: '能管负责人姓名', prop: 'principal', },
        // { label: '能管负责人电话', prop: 'principalPhone', },
        // { label: '能源管理师证号', prop: 'managerId', },
        // { label: '是否能源管理体系认证', prop: 'managementCertification', },
        // { label: '认证日期', prop: 'certificationDate', },
        // { label: '认证机构', prop: 'certificationBody', },
        // { label: '企业主要生产线名称', prop: 'mainProductionLine', },
        // { label: '企业主导产品', prop: 'leadingProduct', },
        // { label: '租户ID', prop: 'tenantId', },
        // { label: '创建时间', prop: 'creationTime', },
        // { label: '创建用户', prop: 'creationId', },
      ],
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    },
  },
  mounted () {
    this.query()
  },
  methods: {
    driving (row) {
      if (row.lnglat) {
        // this.drivingTo = row.lnglat.split(',').map(Number)
        // this.$nextTick(() => {
        //   this.$refs.driving.open()
        // })
      }
    },
    backToVisual () {
      this.$router.push({
        name: 'VisualEnterpriseEnergy'
      }).catch(() => {
      })
    },
    reload () {
      this.query()
    },
    search () {
      this.reload()
    },
    query () {
      this.loading = true
      const params = {
        belongIndustry: this.belongIndustry,
        districtBelong: this.districtBelong,
        energyConsumptionLevel: this.energyConsumptionLevel,
      }
      return api.getListEnterprise(params).then(res => {
        res.data = res.data || []
        res.data.forEach(v => {
          const {
            longitude,
            latitude
          } = v
          v.lnglat = (longitude && latitude) ? `${longitude},${latitude}` : ''
        })
        this.lists = res.data
      }).finally(() => {
        this.loading = false
      })
    },
    add () {
      this.modalTitle = '新增企业'
      this.modalData = {}
      this.$nextTick(() => {
        this.$refs.modal.open()
      })
    },
    edit (row) {
      this.modalTitle = '编辑企业'
      this.modalData = { ...row }
      this.$nextTick(() => {
        this.$refs.modal.open()
      })
    },
    del (row) {
      confirmDel(this).then(() => {
        api.del(row.id).then(res => {
          if (res.code === 200) {
            this.reload()
            this.$message.success('删除成功')
          }
        })
      }).catch(() => {
      })
    },
  },
}
</script>
